<template>
  <div class="MyNeed">
    <div class="MyNeed-title">
      <span>我的解决方案</span>
      <span class="add-btn">
        <a-button type="primary" @click="add" ghost>发布解决方案</a-button>
      </span>
    </div>
    <div class="mt-10 card-box">
      <a-form-model layout="inline" class="clearfix" :form="form">
        <a-form-model-item label="关键字：">
          <a-input placeholder="请输入解决方案名称或解决方案编号" v-model="keyword" />
        </a-form-model-item>
        <a-form-model-item label="解决方案状态：">
          <a-select style="width: 120px" @change="handleChange" v-model="solutionStatus" placeholder="请选择">
            <a-select-option :value="0">请选择</a-select-option>
            <a-select-option v-for="item in solutionStatusList" :value="item.key" :key="item.key">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="审核状态：">
          <a-select style="width: 120px" @change="handleChange" v-model="auditStatus" placeholder="请选择">
            <a-select-option :value='0'>请选择</a-select-option>
            <a-select-option v-for="item in auditStatu" :value="item.key" :key="item.key">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="咨询量：">
          <a-input style="width:50px" v-model="startCount" placeholder="" />
        </a-form-model-item>
        <a-form-model-item label="">
          至
        </a-form-model-item>
        <a-form-model-item label="">
          <a-input style="width:50px" v-model="endCount" placeholder="" />
        </a-form-model-item>
        <a-form-model-item label="更新时间">
          <a-range-picker @change="onChange" :placeholder="['开始日期', '结束日期']" v-model="creatDate">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <div class="f-right mt-8">
          <a-button class="mr-8" style="color:#909399;" @click="clear">重置</a-button>
          <a-button type="primary" @click="SearchData">搜索</a-button>
        </div>
      </a-form-model>
    </div>

    <div class="action">
      <a-table :scroll="{ x: 1500}" :columns="columns" :data-source="materialsDemand" :pagination="ipagination" :rowKey="record=>record.id">
        <div slot="auditStatus" slot-scope="text" style="color: #E9284F;" v-if=" text == 1">审核中</div>
        <div slot="auditStatus" slot-scope="text" style="color: #0DA9B0;" v-else-if=" text == 2">已通过</div>
        <div slot="auditStatus" slot-scope="text" style="color: #EE6224;" v-else-if=" text == 3">未通过</div>
        <template slot="handle" slot-scope="text,recode">
          <a @click="showInformation(recode)">详情</a>
          <a-divider type="vertical" />
          <a @click="operation(recode)">编辑</a>
        </template>
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="action" slot-scope="text,record">
          <a @click="seeEdit(record)">查看详情</a>
          <!-- auditStatus	审核状态（1:审核中;2:已通过;3:未通过） -->
          <!-- solutionStatus	方案状态(1:已上架;2:未上架) -->
          <a v-if="(record.auditStatus == 3 && record.solutionStatus == 2) || (record.auditStatus == 2 && record.solutionStatus == 1) || (record.auditStatus == 2 && record.solutionStatus == 2)"
            @click="handleEdit(record)" class="ml-24">编辑</a>
          <a v-if="(record.auditStatus == 3 && record.solutionStatus == 2) || (record.auditStatus == 2 && record.solutionStatus == 1) || (record.auditStatus == 2 && record.solutionStatus == 2)"
            @click="DelDate(record)" class="ml-24">删除</a>
          <a v-if="(record.auditStatus == 2 && record.solutionStatus == 1)" @click="XiaJiawnupdateSolutionStatus(record)" class="ml-24">下架</a>
          <!-- <a v-if="(record.auditStatus == 2 && record.solutionStatus == 2)" @click="ShangJiaupdateSolutionStatus(record)" class="ml-24">上架</a> -->
        </span>
      </a-table>
      <!-- <a-modal v-model="visible" title="删除需求" @ok="handleOk">
        <p>是否确认删除该需求？</p>
        <br>
        <a-checkbox  v-if="Status=='已过期' && auditStatus==2" :checked="checkNick" @change="handleChange1">
          该需求已解决
        </a-checkbox>
      </a-modal> -->
    </div>
    <!-- <Edit ref="Edit" :msg="EditId"></Edit> -->
  </div>
</template>

<script>
import moment from "moment";
// import Edit from "./component/Edit.vue";
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
import { setIsSign } from "@/utils/auth"; // get token from cookie

import {
  getUserMySolutionInfoPageList,
  deletesolutionInfo,
  updateSolutionStatus,
} from "@/apis/user/solutionInfo";
export default {
  // components: {
  //   Edit
  // },
  data() {
    return {
      startCount: "",
      endCount: "",
      keyword: "",
      creatDate: [],
      solutionStatus: 0,
      auditStatus: 0,
      materialsDemand: [],
      updateTimeFrom: "",
      updateTimeTo: "",
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 80,
          align: "center",
          customRender: (text, record, index) =>
            `${(this.ipagination.current - 1) * 10 + index + 1}`, // 显示每一行的序
        },
        {
          title: "解决方案名称",
          dataIndex: "solutionName",
          key: "solutionName",
          // ellipsis: true,
        },
        {
          title: "解决方案编号",
          dataIndex: "solutionNo",
          align: "center",
          //  ellipsis: true,
        },
        {
          title: "解决方案状态",
          dataIndex: "solutionStatus",
          align: "center",
          scopedSlots: { customRender: "solutionStatus" },
          ellipsis: true,
          customRender: function (text, record, index) {
            if (text == 1) {
              return "已上架";
            } else if (text == 2) {
              return "未上架";
            }
          },
        },
        {
          title: "咨询量",
          dataIndex: "messageCount",
          align: "center",
          scopedSlots: { customRender: "messageCount" },
          // ellipsis: true,
          // customRender:function (text) {
          //   if(text==1){
          //     return "审核中"
          //   }else if(text==2){
          //     return "已通过"
          //   }else if(text==3){
          //     return "未通过"
          //   }
          // }
        },
        {
          title: "审核状态",
          dataIndex: "auditStatus",
          align: "center",
          scopedSlots: { customRender: "auditStatus" },
          // ellipsis: true,
          // customRender:function (text) {
          //   if(text==1){
          //     return "审核中"
          //   }else if(text==2){
          //     return "已通过"
          //   }else if(text==3){
          //     return "未通过"
          //   }
          // }
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
          //  ellipsis: true,
        },
        // {
        //   title: "发布时间",
        //   dataIndex: "createTime",
        //   align: "center",
        //   //  ellipsis: true,
        // },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          align: "center",
          //  ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 200,
          scopedSlots: { customRender: "action" },
        },
      ],
      solutionStatusList: [
        {
          label: "已上架",
          key: 1,
        },
        {
          label: "未上架",
          key: 2,
        },
      ],
      isOverdue: [
        {
          label: "未过期",
          key: 1,
        },
        {
          label: "已过期",
          key: 2,
        },
      ],
      auditStatu: [
        {
          label: "审核中",
          key: 1,
        },
        {
          label: "已通过",
          key: 2,
        },
        {
          label: "未通过",
          key: 3,
        },
      ],
      ipagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      formLine: {},
      EditId: "",
      oldItem: null,
      userId: "",
      isSign: "",
      createTimeFrom: "",
      createTimeTo: "",
      expirationDateFrom: "",
      expirationDateTo: "",
      visible: false,
      checkNick: false,
      delID: "",
      Status: "",
      auditStatus: 0,
    };
  },
  created() {
    this.getEntBaseInfo();
    setTimeout(() => {}, 500);
    this.getUserMySolutionInfoPageList();
  },
  methods: {
    // 删除
    DelDate(item) {
      var that = this;
      this.$confirm({
        title: "您确定要删除此信息吗?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          // 点击确定
          let _params = {
            id: item.id,
          };
          deletesolutionInfo(_params).then((res) => {
            if (res.code == 200) {
              that.$message.success("删除成功");
              that.getUserMySolutionInfoPageList();
            }
          });
        },
        onCancel() {
          // 点击取消
          console.log("Cancel");
        },
      });
    },
    // 上架
    ShangJiawnupdateSolutionStatus(item) {
      let _params = {
        id: item.id,
        solutionStatus: 2,
        auditStatus: 1,
      };
      updateSolutionStatus(_params).then((res) => {});
    },
    // 下架
    XiaJiawnupdateSolutionStatus(item) {
      var that = this;
      this.$confirm({
        title: "您确定要下架此解决方案吗?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          // 点击确定
          let _params = {
            id: item.id,
            solutionStatus: 2,
          };
          updateSolutionStatus(_params).then((res) => {
            if (res.code == 200) {
              that.$message.success("下架成功");
              that.getUserMySolutionInfoPageList();
            }
          });
        },
        onCancel() {
          // 点击取消
          console.log("Cancel");
        },
      });
    },
    //删除
    deletesolutionInfo(values) {
      let _params = {
        id: values,
      };
      deletesolutionInfo(_params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getUserMySolutionInfoPageList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((error) => {
          this.$message.warning("服务错误");
        });
    },
    SearchData() {
      this.ipagination.current = 1;
      this.getUserMySolutionInfoPageList();
    },
    getUserMySolutionInfoPageList() {
      let _params = {
        startCount: this.startCount,
        endCount: this.endCount,
        keyword: this.keyword,
        // creatDate:[],
        solutionStatus: this.solutionStatus,
        // materialsDemand: [],
        current: this.ipagination.current,
        updateTimeFrom: this.updateTimeFrom,
        updateTimeTo: this.updateTimeTo,
        size: this.ipagination.pageSize,
        auditStatus: this.auditStatus,
      };
      getUserMySolutionInfoPageList(_params)
        .then((res) => {
          if (res.code == 200) {
            this.materialsDemand = res.data.records;
            this.ipagination.total = res.data.total;
          }
        })
        .catch((error) => {});
    },
    //获取企业基本信息
    getEntBaseInfo() {
      getEntBaseInfo().then((res) => {
        console.log("获取企业信息");
        console.log(res);
        if ((res.code = 200)) {
          this.userId = res.data.userId;
          this.isSign = res.data.isSign;
        }
      });
    },

    handleSubmit(e) {},
    clear() {
      this.keyword = "";
      this.solutionStatus = 0;
      this.auditStatus = 0;
      this.ipagination.current = 1;
      this.creatDate = [];
      this.updateTimeFrom = "";
      this.updateTimeTo = "";
      this.startCount = "";
      this.endCount = "";
      this.getUserMySolutionInfoPageList();
    },
    handleChange(value) {
      // console.log(`selected ${value}`);
    },
    onChange(date, dateString) {
      console.log(dateString);
      if (dateString[0] != "") {
        this.updateTimeFrom = dateString[0];
        this.updateTimeTo = dateString[1];
      } else {
        this.updateTimeFrom = "";
        this.updateTimeTo = "";
      }
    },
    //查看详情按钮的点击事件
    add() {
      if (this.isSign == 1) {
        this.$router.push("/usercenter/Addprogramme");
      } else {
        this.$store.commit('setIsSign',true);
        // this.$message.warning('您需要完成信用承诺函签署再进行该操作。')
      }
    },
    seeEdit(record) {
      let id = record.id;
      this.$router.push({
        path: "/usercenter/Addprogramme",
        query: { id, type: "look" },
      });
    },
    //编辑按钮的点就事件
    handleEdit(item) {
      // this.EditId = item.id;
      // this.$refs.Edit.visible = true;
      let id = item.id;
      this.$router.push({
        path: "/usercenter/Addprogramme",
        query: { id, type: "edit" },
      });
    },
    //删除按钮的点击事件
    deleEdit(item) {
      console.log(item);
      var that = this;
      this.$confirm({
        title: "是否确认删除该解决方案？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          // 点击确定
          that.deletesolutionInfo(item.id);
        },
        onCancel() {
          // 点击取消
          console.log("Cancel");
        },
      });
    },

    Edit(item) {
      console.log(item);
      var that = this;
      this.$confirm({
        title: "是否确认已解决该需求?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          // 点击确定
          let id = item.id;
          let demandStatus = 1;
        },
        onCancel() {
          // 点击取消
          console.log("Cancel");
        },
      });
    },

    // 分页搜索
    onPageChange(page, pageSize) {
      this.ipagination.current = page;
      this.getUserMySolutionInfoPageList();
    },
    // 页容量改变
    onSizeChange(current, pageSize) {
      this.ipagination.pageSize = pageSize;
      this.ipagination.current = current;
      this.getUserMySolutionInfoPageList();
    },
  },
};
</script>

<style lang="less" scoped>
.MyNeed {
  padding: 16px 24px;
  background: #fff;
  .MyNeed-title {
    &:nth-child(1) {
      font-size: 22px;
      color: #303133;
    }
    .add-btn {
      margin-left: 16px;
      width: 60px;
      height: 32px;
      background-color: #ffffff;
      border-radius: 4px;
    }
  }

  .card-box {
    padding: 16px 19px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 24px;
  }

  .action {
    span {
      a {
        font-size: 14px;
        color: #188af1;
      }
    }
  }
}
</style>